<template>
  <div class="recommend-c">
    <div class="top">
      <span
        ><img
          src="../../../assets/healthNews/recommend/images/icon@2x.png"
          alt=""
      /></span>
      <span>热搜</span>
      <van-search v-model="value" placeholder="换一换" left-icon="replay" />
    </div>

    <!-- 六条热搜 -->
    <ul class="sixItem">
      <li>
        <p>HPV疫苗预约入口<span class="bao">爆</span></p>
        <p>二十四节气·养生<span class="re">热</span></p>
      </li>
      <li>
        <p>新冠疫苗接种指南<span class="xin">新</span></p>
        <p>100%儿子的秘方<span class="xin">新</span></p>
      </li>
      <li>
        <p>宫颈癌入侵的征兆<span class="bao">爆</span></p>
        <p>60轻松入睡<span class="bao">爆</span></p>
      </li>
    </ul>
    <!-- 图片导航 -->
    <div class="navImg">
      <div class="navItem" v-for="(item, index) in navImgList" :key="index">
        <img :src="item.imgUrl" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <!-- 渲染 -->
    <div class="item" v-for="(item, index) in newsList" :key="index">
      <div class="itemTop">
        <p>{{ item.title }}</p>
        <img :src="item.imgUrl" alt="" />
      </div>
      <div class="itemBotton">
        <span class="bottonLeft">
          <img
            src="../../../assets/healthNews/recommend/images/weimai.png"
            alt=""
          />
          <span>微脉健康</span>
          <span id="time">{{ item.data }}</span>
        </span>
        <span class="bottonRight"
          ><span>{{ item.read }}</span
          >阅读</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getNewApi } from "../../../utils/api";
import "../../../assets/css/recommend.css";
export default {
  data() {
    return {
      value: "",
      navImgList: [
        {
          imgUrl: require("../../../assets/healthNews/recommend/images/icon@2x(1).png"),
          title: "全部",
        },
        {
          imgUrl: require("../../../assets/healthNews/recommend/images/icon@2x(2).png"),
          title: "孕产育儿",
        },
        {
          imgUrl: require("../../../assets/healthNews/recommend/images/zhongyi.png"),
          title: "中医养生",
        },
        {
          imgUrl: require("../../../assets/healthNews/recommend/images/icon@2x(3).png"),
          title: "疾病常识",
        },
      ],
      newsList: [],
    };
  },
  mounted() {
    this.getNews();
    this.setTimeNum();
  },
  methods: {
    async getNews() {
      const res = await getNewApi();
      this.newsList = res.result[0].recommend;
    },
    async setTimeNum() {
      let time = document.getElementById("time");
      console.log(time);
    },
  },
};
</script>
<style lang="less" scoped>
.recommend-c {
  padding: 0 14px;
  overflow: auto;
  position: fixed;
  top: 98px;
  left: 0;
  right: 0;
  bottom: 50px;
}
</style>
